<template>
  <div class="app-container">
    <div class="user-analyse">
      <AnalyseCard icon-class="videomagic" title="课程进度">
        <template #default>
           <span style="color: gray">
             必修课：已学完课程 <span style="color: black;font-size: 20px;font-weight: bold">{{learnData.complateCompulsory}}</span> / {{learnData.compulsoryCount}} 选修课：已学完课程 <span style="color: black;font-size: 20px;font-weight: bold">{{learnData.complateElective}}</span> / {{learnData.electiveCount}}
           </span>
        </template>
      </AnalyseCard>

      <AnalyseCard icon-class="learntime" title="学习时长">
        <template #default>
            <span style="color: gray">
              今日： <span style="color: black;font-size: 20px;font-weight: bold">{{formatMillsSecondToMinuteObj(learnData.todayLearnTime).minute}}</span> 分钟 <span style="color: black;font-size: 20px;font-weight: bold">{{formatMillsSecondToMinuteObj(learnData.todayLearnTime).sec}}</span> 秒 累计： <span style="color: black;font-size: 20px;font-weight: bold">{{formatMillsSecondToMinuteObj(learnData.totalLearTime).minute}}</span> 分钟  <span style="color: black;font-size: 20px;font-weight: bold">{{formatMillsSecondToMinuteObj(learnData.totalLearTime).sec}}</span> 秒
            </span>
        </template>
      </AnalyseCard>
    </div>
    <div class="course-type-menu">
      <el-menu
        class="el-menu-course"
        mode="horizontal"
        default-active="0"
        :ellipsis="false"
      >
        <el-menu-item index="0" @click="selectQueryParam(0)">全部</el-menu-item>
        <el-menu-item index="1" @click="selectQueryParam(1)">必修课</el-menu-item>
        <el-menu-item index="2" @click="selectQueryParam(2)">选修课</el-menu-item>
        <el-menu-item index="3" @click="selectQueryParam(3)">已学完</el-menu-item>
        <el-menu-item index="4" @click="selectQueryParam(4)">未学完</el-menu-item>
        <div class="flex-grow" />
      </el-menu>
      <div>
        <el-tree-select
          v-model="queryParams.courseTypeId"
          :data="courseTypeTreeData"
          node-key="id"

          placeholder="请选择课程分类"
          :props="{ label: 'name' }" />
      </div>
    </div>
    <div class="course-container">
      <CourseItem v-for="(item,index) in userCourseData" :model-value="item" :key="index" @click="courseItemClickListener(item)">

      </CourseItem>
    </div>
  </div>
</template>
<script setup>
import AnalyseCard from '@/components/AnalyseCard/index.vue'
import {  onMounted, reactive, ref, watch } from 'vue'
import { tree } from '@/api/tsm/CourseType.js'
import { listCourse } from '@/api/tsm/course.js'
import useUserStore from '@/store/modules/user.js'
import CourseItem from '@/views/components/CourseItem.vue'
import { userLearnData } from '@/api/data/historydata.js'
import { formatMillsSecondToMinuteObj } from '../utils/ruoyi.js'
import { useRouter } from 'vue-router'

const courseTypeTreeData = ref([])
let userStore = useUserStore()
let router = useRouter()
const userCourseData = ref([])
const queryParams = reactive({
  prop: undefined,
  complate: undefined,
  courseTypeId: undefined,
  deptId: undefined,
  userId: undefined
})
let learnData = ref({
  compulsoryCount: 0,
  electiveCount: 0,
  complateCompulsory: 0,
  complateElective: 0,
  todayLearnTime: 0,
  totalLearTime: 0
})

watch(() => queryParams.courseTypeId, (n, o) => {
  console.log(n,o)
  initCourseList()
})

onMounted(() => {
  queryParams.userId = userStore.id
  queryParams.deptId = userStore.deptId
  initUserLearnHistoryData();
  tree().then(response => {
    courseTypeTreeData.value = response.data
    courseTypeTreeData.value.unshift({
      id: '0',
      parentId: '0',
      name: '全部分类'
    })
  })
  initCourseList()

})

function initUserLearnHistoryData() {
  userLearnData(userStore.deptId,userStore.id).then(response=>{

    learnData.value = response.data;
  })
}

function initCourseList() {
  listCourse(queryParams).then(response => {
    userCourseData.value = response.rows
  })
}

function selectQueryParam(index) {
  resetQueryParams()
  switch (index) {
    case 1:
      queryParams.prop = 1
      break
    case 2:
      queryParams.prop = 0
      break
    case 3 :
      queryParams.complate = 1
      break
    case 4:
      queryParams.complate = 0
      break
  }
  initCourseList()
}

function resetQueryParams() {
  queryParams.prop = -1
  queryParams.complate = -1
  queryParams.courseTypeId = undefined
}

function courseItemClickListener(item) {
  router.push({path:`/course/info/${item.id}`})
}
</script>

<style scoped>
.user-analyse {
  margin-top: 2em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;


}

.course-type-menu {
  margin-top: 4em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  .el-select {
    width: 100px
  }

  .el-menu-item {
    background-color: transparent !important;
  }

  .el-menu--horizontal {
    border-bottom: transparent !important;
  }
}

.flex-grow {
  flex-grow: 1;
}

.course-container {
  display: grid;
  margin-top: 3em;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 1em;
  grid-row-gap: 1em;

  .el-card {
    border-radius: 12px;
    background: #ffffff;
    transition: 0.5s;
  }

  .el-card:hover {
    box-shadow: 0 4px 16px 4px rgba(0, 0, 0, .04);
  }
}
</style>